<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/05.css">
</head>
<body>
    <div class="box">
        <!-- 头部 -->

        <div class="header">
            <div class="hea">
                <div class="h1">
                    <img src="./img/index-logo.png" alt="">
                </div>
                <div class="h2">
                    <ul>
                        <li>首页 |</li>
                        <li>产品中心 |</li>
                        <li>新闻中心 |</li>
                        <li>公司介绍 |</li>
                        <li>联系我们</li>
                    </ul>
                </div>
                <div class="h3">
                    <div class="span1">
                        <span>登录</span>
                        <span>注册</span>
                        <span>购物车</span>
                    </div>
                    <div class="span2">
                        <span>我的订单 |</span>
                        <span>帮助中心</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- banner部分 -->
        <div class="banner">
            <div class="ban">
                <img src="./img/bannerBar01.png" alt="">
                <div>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- body部分 -->
        <div class="main">
            <div class="ma">
                <div class="top">
                    <img src="./img/logo-cen.png" alt="">
                </div>
                <div class="center">
                    <ul>
                        <li>全新上市</li>
                        <li>| 精品配件 |</li>
                        <li>| 黑客酷车 |</li>
                        <li>| 自行车精品 |</li>
                        <li>| 个性化设计 |</li>
                        <li>专业设计师</li>
                    </ul>
                </div>
                <div class="bottom">
                    <div class="bot">
                        <div class="bo1">
                            <span>HEKKA全新上市自行车</span>
                            <div class="img">
                                <img src="./img/canp (2).png" alt="">
                            </div>
                            <span>HEKKA全新上市自行车<br>ON-ROAD</span>
                            <!-- <span></span> -->
                        </div>
                        <div class="bo2">
                            <div class="up">
                                <img src="./img/canp (1).png" alt="">
                                <div>
                                    <span>
                                        山野林道<br>OFF-RCAD
                                    </span>
                                </div>
                            </div>
                            <div class="down">
                                <img src="./img/canp (5).png" alt="">
                                <div>
                                    <span>
                                        自在骑中<br>OFF-RCAD
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="bo3">
                            <div class="up">
                                <img src="./img/canp (3).png" alt="">
                                <div>
                                    <span>
                                        山野林道<br>OFF-RCAD
                                    </span>
                                </div>
                            </div>
                            <div class="down">
                                <img src="./img/canp (6).png" alt="">
                                <div>
                                    <span>
                                        自在骑中<br>OFF-RCAD
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="bo4">
                            <div class="b">
                                <img src="./img/canp (4).png" alt="">
                                <div>
                                    <span>
                                        专业首席设计师<br>OFF-RCAD
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     
        <!-- footer部分 -->
       
        <div class="footer">
            <div class="foo">
                <div>
                    <span>首页 |</span>
                    <span>产品中心 |</span>
                    <span>新闻中心 |</span>
                    <span>公司介绍 |</span>
                    <span>联系我们</span>
                </div>
                <div>
                    <span>HAKKA相关站点链接：LIV |</span>
                    <span>黑客自行车 |</span>
                    <span>单车运动 |</span>
                    <span>基金会 |</span>
                    <span>全国加盟</span>
                </div>
                <div>
                    <span>版权：xxxxx xxxxxxxxxxxxxxxxxx公司</span>
                </div>
            </div>
        </div>

    </div>
</body>
</html>